<template>
    <ul 
        class="number-container"
        :style="{
            '--item-height':'35px',
            '--item-width':'27px',
        }">
        <li
            class="number-item"
            v-for="(item, index) in numList"
            :key="index">
            <div 
                ref="NumberItem">
                <div v-for="item in 10" :key="item">{{item - 1}}</div>
            </div>
        </li>
    </ul>
</template>
<script>
//数字滚动翻转效果组件
export default {
    props: {
        value: {
            type: Number, // 具体数值
            default() {
                return 0;
            },
        },
    },
    data() {
        return {
            numList:[],  //数字列表
        };
    },
    watch:{
        value(){  //当值改变时执行
            this.toNumList();
        },
    },
    mounted(){
        this.toNumList();
    },
    methods: {
        setNumberTransform() {  // 设置文字位置
            this.$nextTick(()=>{
                const numberItemEls = this.$refs.NumberItem;
                if(!numberItemEls) return;
                numberItemEls.forEach((itemEl,index)=>{
                    setTimeout(()=>{
                        itemEl.style.transform = `translate(0%, -${this.numList[index] * 10}%)`;
                    },0 + index*300);
                });
            });
        },
        toNumList(){
            let value = Math.ceil(this.value);
            value = value === 0?0:(value || 0);
            let num = value.toString();
            this.numList = num.split(""); //转化为数字数组
            this.setNumberTransform();
        },
    },
};
</script>
<style scoped lang="scss">
.number-container {
    position: relative;
    height: fit-content;
    list-style: none;
    .number-item {
        width: var(--item-width);
        height: var(--item-height);
        list-style: none;
        border-radius: 3px;
        margin-right: 5px;
        position: relative;
        display: inline-block;
        overflow: hidden;
        color: #2d7cff;
        z-index: 0;
        box-shadow: 0 1px 2px #00152924;
        >div{
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(0%, 0%);
            transition: transform 1s cubic-bezier(0.8, 0.01, 0.49, 1.17);
            display: flex;
            flex-direction: column;
            width: var(--item-width);
            >div{
                width: var(--item-width);
                height: var(--item-height);
                font-style: normal;
                line-height: var(--item-height);
                text-align: center;
                font-size: 30px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #1A1A1A;
            }
        }
        &::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 50%;
            top: 0;
            left: 0;
            background: #E6E6E6;
            z-index: -1;
        }
        &::before{
            position: absolute;
            content: '';
            width: 100%;
            height: 50%;
            bottom: 0;
            left: 0;
            background: #D7D7D7;
            z-index: -1;
        }
    }
    .number-item:last-child {
        margin-right: 0;
    }
}
</style>
